<script type="text/javascript">
var user_edit;
var user_delete;
$(document).ready(function(){
/* Start Variable Declaration */
    var user_source;
    var user_adapter;
    var user_buttonAdd;
    var user_searchField;
    var user_expander=$('#user_expander');
    var user_save=$("#user_save");
    var user_reset=$("#user_reset");
    
    var user_grid=$('#user_grid');

/* Form Component Declaration */
    $('.inputfield').jqxInput({ theme : global_theme });
    user_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : false});
    
    $("#user_usergroup").jqxComboBox({
        width: 200,
        height: 25,
        displayMember: "usergroup_nama",
        valueMember: "usergroup_id",
        source: new $.jqx.dataAdapter({
            datatype: "json",
            root : 'results',
            datafields: [
                { name: 'usergroup_id' },
                { name: 'usergroup_nama' }
            ],
            url: "index.php/c_usergroup/get_list"
        })
    });
    $("#user_aktif").jqxSwitchButton({ theme: global_theme, width: '100', height: '26', checked: true, onLabel : 'Ya', offLabel : 'Tidak' });
    
    user_save.jqxButton();
    user_save.bind('click', function(e){ user_save_form(e); });
    user_reset.jqxButton();
    user_reset.bind('click', user_reset_form);
    
/* Grid And Toolbar Declaration */
    user_buttonAdd = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Tambah Data</button>");
    user_buttonAdd.jqxButton({ width : 120 });
    user_buttonAdd.bind('click', function(){ user_expander.jqxExpander('expand'); });
    user_searchField = $('<input type="text" class="inputfield" name="user_search" placeholder="Pencarian">');
    user_searchField.jqxInput({ theme : global_theme });

    user_source={
        id : 'user_id',
        url : 'index.php/c_user/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'user_id' },
            { name : 'user_name' },
            { name : 'usergroup_nama' },
            { name : 'user_aktif' }
        ],
		addrow: function (rowid, rowdata, position, commit) {
			commit(true);
		},
        beforeprocessing : function(data){
            user_source.totalrecords = data[0].total;
        }
    }
    user_adapter = new $.jqx.dataAdapter(user_source);
   
    user_grid.jqxGrid({
        source : user_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append(user_buttonAdd);
            container.append(' | ');
            container.append(user_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return user_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'user_id', hidden : true },
            { text : 'Username', dataField : 'user_name' },
            { text : 'Usergroup', dataField : 'usergroup_nama' },
            { text : 'Aktif', dataField : 'user_aktif' },
			{ text : '&nbsp;', width: 30, cellsrenderer : function(row){
					var record = user_grid.jqxGrid('getrowdata', row);
					var id = record.user_id;
					return '<img src="assets/images/icons/edit.png" onClick="user_edit(event, ' + id + ')" title="Ubah Data" style="margin:2px 7px 2px 7px;"/>';
				}
			},
			{ text : '&nbsp;', width: 30, cellsrenderer : function(row){
					var record = user_grid.jqxGrid('getrowdata', row);
					var id = record.user_id;
					return '<img src="assets/images/icons/delete.png" onClick="user_delete(event, ' + id + ')" title="Hapus Data" style="margin:2px 7px 2px 7px;"/>';
				}
			}
        ]
    });
/* Function Declaration */
    function user_reset_form(){
        user_expander.jqxExpander('collapse');
    }
    function user_save_form(e){
        e.preventDefault();
        var params = new Object();
        params.user_id=$('#user_id').val();
        params.form_data=$('#user_form').serializeObject();
        params.form_data.user_usergroup_id = $("#user_usergroup").jqxComboBox('val');
        if($("#user_aktif").jqxSwitchButton('val') === true){params.form_data.user_aktif = 'y';}else{params.form_data.user_aktif = 't';}
        params=JSON.stringify(params);
        $.ajax({
            url : 'c_user/save',
            method : 'post',
            data : {params:params},
            success : function(response){
                var res = $.parseJSON(response);
                user_grid.jqxGrid('updatebounddata');
                $.global_show_notif(MSAVE_SUCCESS,'success');
                user_reset.click();
            }
        });
    }
	function fuser_edit(e, user_id){
		var rowindex = user_grid.jqxGrid('getselectedrowindex');
		var data_record = user_grid.jqxGrid('getrowdata', rowindex);
		$("#user_form").unserializeObject(data_record);
		$("#user_usergroup").find('input').val(data_record.usergroup_nama);
		$("#user_aktif").jqxSwitchButton('val', ((data_record.user_aktif == 'y') ? true : false) );
		user_expander.jqxExpander('expand');
	}
	user_edit = fuser_edit;
	function fuser_delete(e, user_id){
		var rowindex = user_grid.jqxGrid('getselectedrowindex');
		var data_record = user_grid.jqxGrid('getrowdata', rowindex);
		$.global_show_confirm('Peringatan',MCONFIRM_DELETE_MASTER);
		$("#confirm_window_ok").click(function(){
			var process = $.global_show_processing();
			$.ajax({
				url : 'c_user/delete',
				method : 'post',
				data : {user_id:user_id},
				success : function(response){
					process.hide();
					var res = $.parseJSON(response);
					user_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
					user_reset.click();
				}
			});
		});
	}
	user_delete = fuser_delete;
	user_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			user_source['data']['search_text'] = $(this).val();
			user_grid.jqxGrid('updatebounddata');
		}
	});
});
</script>
<div>
    <div id="user_expander" style="padding-bottom : 10px;">
        <div>Form User</div>
        <div>
            <form class="form-horizontal" id="user_form" style="padding:10px;overflow:hidden;">
                <input type="hidden" id="user_id" name="user_id">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Username</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="user_name"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-4"><input type="password" class="inputfield" name="user_password"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Usergroup</label>
                    <div class="col-sm-4"><div id="user_usergroup"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Aktif ?</label>
                    <div class="col-sm-4"><div id="user_aktif"></div></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="user_save">Simpan</button>
                        <button type="reset" id="user_reset">Batal</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="user_grid"></div>
</div>